<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" type="text/javascript" charset="utf-8">
		</script>
		<style type="text/css">
			ul li {
				list-style: none;

			}

			input {
				margin-left: 20px;
				width: 300px;
			}

			#nav {
				background-color: #BEBEBE;
				width: 370px;
			}

			audio {
				width: 350px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="nav">
				<input v-model="input" name="" @keyup.enter="search()" placeholder="请输入内容" />
				<ul v-for="(item,index) in list" :key="index">
					<li><i>{{(index+1)}}.</i>{{item.name}}<button type="button" @click="pay(item.id)">播放</button></li>
					
				</ul>
				
				<audio controls="controls" autoplay :src="urls">
					
				</audio>
				
			</div>


		</div>
		<script type="text/javascript">
			/* 接口
		 获取歌曲播放地址
		 url:https://autumnfish.cn/song/url
		 方法:get
		 参数：id
		 回车搜索
		 接口
		 url:https://autumnfish.cn/search
		 方法:get
		 参数：keywords 搜索关键字
		 
		 */
		const app =	new Vue({
				el: '#app',
				data: {
					message: 'xie',
					input: "",
					list: [],
					urls:''
				},
				methods: {
					pay(id) {//播放
						axios({
							url:"https://autumnfish.cn/song/url",
							method:"get",
							params:{
								id:id
							}
						}).then(res => {
							this.urls = res.data.data[0].url			
							this.list =''
						}
							
						)
					},
					search() {//搜索请求
						axios({
							//请求的地址
							url: "https://autumnfish.cn/search",
							method: "get", //请求方法
							params: {
								keywords: this.input
							}
						}).then(res => {
							this.list = res.data.result.songs
						})
					},

				}
			});
		</script>
	</body>
</html>
